ওয়েব অ্যাপ্লিকেশনের স্টাইলিং এবং লেআউট ডিজাইন ব্যবহারকারীর অভিজ্ঞতা (UX) এবং অ্যাপ্লিকেশনের কার্যকারিতার জন্য অত্যন্ত গুরুত্বপূর্ণ। একটি সুসজ্জিত এবং সহজে ব্যবহৃত ওয়েব পেজ ব্যবহারকারীদের আকর্ষণ করতে সহায়তা করে এবং তাদের পেজে নেভিগেট করতে সহজ করে তোলে। ASP.NET Web Forms এ, স্টাইলিং এবং লেআউট ডিজাইন করার জন্য বিভিন্ন প্রযুক্তি এবং পদ্ধতি ব্যবহার করা যায়, যেমন CSS, JavaScript, এবং Bootstrap।
ওয়েব অ্যাপ্লিকেশন স্টাইলিং করার জন্য প্রধানত CSS (Cascading Style Sheets) ব্যবহার করা হয়। CSS ওয়েব পেজের বিভিন্ন উপাদানের (যেমন, টেক্সট, বাটন, লেআউট, ইত্যাদি) দেখানোর স্টাইল নির্ধারণ করে। CSS এর সাহায্যে আপনি ফন্ট, কালার, মার্জিন, প্যাডিং, বর্ডার, এবং অন্যান্য স্টাইল নির্ধারণ করতে পারেন।
উদাহরণ:
<p style="color: red;">This is a red text.</p>
<head> সেকশনে <style> ট্যাগ ব্যবহার করে CSS কোড লেখা হয়। এটি পেজের সকল উপাদানের জন্য স্টাইল প্রয়োগ করতে পারে।উদাহরণ:
<style>
p {
color: blue;
}
</style>
উদাহরণ:
<link rel="stylesheet" type="text/css" href="styles.css">
Font Styling:
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
}
Color Styling:
h1 {
color: #4CAF50;
}
Box Model (Margin, Padding, Border):
div {
margin: 20px;
padding: 10px;
border: 1px solid #000;
}
লেআউট ডিজাইন ওয়েব পেজের বিভিন্ন উপাদানকে সঠিকভাবে সাজানোর একটি প্রক্রিয়া। ওয়েব পেজের লেআউট ডিজাইন করার জন্য সাধারণত Flexbox, Grid, এবং Float সিস্টেম ব্যবহার করা হয়। এছাড়া, বিভিন্ন কনটেন্টের মধ্যে প্রপার মার্জিন এবং প্যাডিং ব্যবহার করে লেআউট তৈরি করা হয়।
CSS Grid একটি শক্তিশালী লেআউট সিস্টেম, যা পেজের কন্টেন্টের জন্য ২ডি লেআউট তৈরির জন্য ব্যবহৃত হয়। এটি rows এবং columns দিয়ে পেজের কন্টেন্ট সাজাতে সাহায্য করে।
উদাহরণ:
.container {
display: grid;
grid-template-columns: auto auto auto;
gap: 20px;
}
.item {
background-color: #f2f2f2;
padding: 20px;
}
Flexbox একটি একক-ডাইমেনশনাল লেআউট মডেল, যা উপাদানগুলিকে গ্যাপ এবং স্পেস প্রপারলি পরিচালনা করে সোজা বা উল্লম্বভাবে সাজাতে সাহায্য করে।
উদাহরণ:
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
margin: 10px;
}
Float এক্সটেন্ড করা ইলিমেন্টগুলির জন্য ব্যবহার করা হয় যা ডকুমেন্টের সাধারণ ফ্লো থেকে বের হয়ে যায় এবং অন্য উপাদানগুলির পাশে ফ্লোট করে। তবে, ফ্লোটের ব্যবহার বর্তমানে কমে এসেছে, কারণ Flexbox এবং Grid এর মত আধুনিক পদ্ধতিগুলি অধিক কার্যকরী।
Bootstrap একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা ওয়েব ডিজাইনারদের দ্রুত এবং রেসপনসিভ ওয়েবসাইট তৈরি করতে সহায়তা করে। এটি প্রাথমিক HTML, CSS এবং JavaScript ফ্রেমওয়ার্কের উপর ভিত্তি করে তৈরি।
Bootstrap এ 12-column grid সিস্টেম ব্যবহৃত হয়, যার মাধ্যমে আপনি ওয়েব পেজের কন্টেন্টকে রেসপনসিভ এবং সঠিকভাবে সাজাতে পারেন।
উদাহরণ:
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
স্টাইলিং এবং লেআউট ডিজাইন ওয়েব অ্যাপ্লিকেশনের একটি গুরুত্বপূর্ণ অংশ। CSS এবং Bootstrap এর মাধ্যমে আপনি ওয়েব পেজকে সুন্দর এবং ব্যবহারযোগ্য করতে পারেন। একটি ভাল ডিজাইন কেবলমাত্র অ্যাপ্লিকেশনের বাহ্যিক সৌন্দর্যই নয়, বরং ইউজার অভিজ্ঞতা (UX) উন্নত করতে সহায়তা করে। সঠিক স্টাইলিং এবং লেআউট ডিজাইন ব্যবহারকারীদের অ্যাপ্লিকেশন ব্যবহারে আরও সহজ এবং আনন্দদায়ক অনুভূতি দেয়।
ওয়েব ডিজাইনে লেআউট ডিজাইন করা একটি গুরুত্বপূর্ণ দিক, যা ওয়েবসাইটের ইউজার ইন্টারফেস (UI) এবং ইউজার এক্সপেরিয়েন্স (UX) উন্নত করতে সহায়তা করে। CSS (Cascading Style Sheets) এবং JavaScript এর মাধ্যমে ওয়েব পেজের লেআউট তৈরি করা সম্ভব, যেখানে CSS মূলত ডিজাইন ও স্টাইলিং এর জন্য এবং JavaScript ইন্টারঅ্যাকটিভ ফিচার যোগ করার জন্য ব্যবহৃত হয়।
এই টিউটোরিয়ালে আমরা আলোচনা করব কিভাবে CSS এবং JavaScript ব্যবহার করে একটি কার্যকরী এবং ইন্টারঅ্যাকটিভ লেআউট ডিজাইন করা যায়।
CSS হল ওয়েব পেজের ডিজাইন এবং লেআউট নিয়ন্ত্রণ করার জন্য ব্যবহৃত স্টাইল শীট ভাষা। এটি HTML এর কাঠামোর উপর স্টাইল প্রয়োগ করে। CSS এর মাধ্যমে পেজের পটভূমি, ফন্ট, মার্জিন, প্যাডিং, এবং বক্স মডেল এর মতো অনেক বিষয় নিয়ন্ত্রণ করা যায়। লেআউট ডিজাইনের জন্য CSS বিভিন্ন টেকনিক ব্যবহার করা হয়, যেমন Flexbox, Grid এবং Float।
Flexbox একটি শক্তিশালী লেআউট মডেল যা একটি একক দিকের (রো বা কলাম) ভিতরে উপাদানগুলোর অবস্থান এবং আকার নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি দ্রুত এবং সহজে রেস্পন্সিভ ডিজাইন তৈরি করার জন্য উপযুক্ত।
Flexbox উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<style>
.container {
display: flex;
justify-content: space-between; /* উপাদানগুলোর মধ্যে স্থান ভাগাভাগি */
}
.item {
background-color: #4CAF50;
color: white;
padding: 20px;
width: 30%;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
এখানে, .container ক্লাসের মধ্যে display: flex ব্যবহার করা হয়েছে, যাতে উপাদানগুলো (Item 1, Item 2, Item 3) এক সারিতে (row) প্রদর্শিত হয়।
CSS Grid আরো উন্নত লেআউট ডিজাইনের জন্য ব্যবহার করা হয়। এটি দুইটি দিক (row এবং column) এর মধ্যে উপাদানগুলি রাখার জন্য একটি টেবিলের মতো পদ্ধতি প্রদান করে। Grid ব্যবহার করলে ওয়েব পেজের এলিমেন্টগুলোকে একটি নির্দিষ্ট গ্রিড সিস্টেমের মধ্যে সহজে সন্নিবেশ করা যায়।
Grid Layout উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* তিনটি কলাম তৈরি */
gap: 20px; /* কলামগুলোর মধ্যে ফাঁকা জায়গা */
}
.item {
background-color: #4CAF50;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
এখানে, grid-template-columns ব্যবহার করে তিনটি কলাম তৈরি করা হয়েছে। এর মাধ্যমে সহজেই উপাদানগুলোর মধ্যে সমান জায়গা ভাগ করা সম্ভব।
Float একটি পুরনো পদ্ধতি যা HTML এলিমেন্টগুলিকে একে অপরের পাশে রাখে। তবে এটি বর্তমানে Flexbox এবং Grid এর বিকল্প হিসেবে ব্যবহৃত হয়, কিন্তু পুরানো ব্রাউজারে গ্রিড এবং ফ্লেক্সবক্স সাপোর্ট না থাকলে এটি কার্যকরী হতে পারে।
Float Layout উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Layout</title>
<style>
.container {
width: 100%;
}
.item {
width: 30%;
float: left;
margin-right: 20px;
background-color: #4CAF50;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
এখানে, float: left ব্যবহার করে উপাদানগুলো একে অপরের পাশে প্রদর্শিত হচ্ছে। তবে, clearfix প্রয়োগ না করলে, প্যারেন্ট কনটেইনারের উচ্চতা সঠিকভাবে কাজ নাও করতে পারে।
JavaScript সাধারণত ওয়েব পেজে ইন্টারঅ্যাক্টিভ ফিচার যোগ করতে ব্যবহৃত হয়, কিন্তু এটি লেআউট নিয়ন্ত্রণেও কার্যকর। JavaScript এর মাধ্যমে আপনি পেজের ডাইনামিক উপাদানগুলোকে position, size, এবং visibility পরিবর্তন করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Layout</title>
<style>
.container {
width: 100%;
height: 300px;
background-color: lightblue;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box"></div>
</div>
<button onclick="moveBox()">Move Box</button>
<script>
function moveBox() {
var box = document.getElementById("box");
box.style.left = "200px"; // Box will move 200px to the right
box.style.top = "100px"; // Box will move 100px down
}
</script>
</body>
</html>
এখানে, moveBox() ফাংশন ব্যবহার করে একটি বক্সের অবস্থান পরিবর্তন করা হয়েছে। এই ধরনের JavaScript কোডের মাধ্যমে আপনি ওয়েব পেজে ডাইনামিক লেআউট পরিবর্তন করতে পারেন।
CSS এবং JavaScript ব্যবহার করে ওয়েব পেজের লেআউট ডিজাইন করা একটি শক্তিশালী এবং ফ্লেক্সিবল পদ্ধতি। CSS এর মাধ্যমে আপনি সহজেই ওয়েব পেজের স্টাইল এবং লেআউট নিয়ন্ত্রণ করতে পারেন, যেখানে Flexbox, Grid এবং Float এর মতো টেকনিক ব্যবহার করা যায়। অন্যদিকে, JavaScript ডাইনামিক এবং ইন্টারঅ্যাকটিভ লেআউট তৈরি করতে সাহায্য করে, যেমন বক্স মুভ করা বা কোন উপাদান গোপন বা দৃশ্যমান করা।
ASP.NET Web Forms এ Bootstrap বা অন্য কোনো ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক ইন্টিগ্রেট করা, ওয়েব অ্যাপ্লিকেশনের ডিজাইন এবং ইউজার ইন্টারফেস (UI) উন্নত করার একটি কার্যকর উপায়। Bootstrap হল একটি ওপেন সোর্স ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা HTML, CSS এবং JavaScript ব্যবহার করে ওয়েব পেজের রেসপনসিভ ডিজাইন তৈরি করতে সাহায্য করে। Bootstrap ব্যবহার করলে ওয়েব পেজের লেআউট খুব সহজে তৈরি করা যায় এবং এটি মোবাইল ফ্রেন্ডলি হয়।
এখানে, Bootstrap ইন্টিগ্রেশনসহ অন্যান্য জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যেমন Foundation, Materialize, বা Tailwind CSS ব্যবহার করাও সম্ভব। এসব ফ্রেমওয়ার্কের সাহায্যে ASP.NET Web Forms অ্যাপ্লিকেশনের ডিজাইন এবং স্টাইলিং আরও আধুনিক এবং মোবাইল রেসপনসিভ করা যায়।
Bootstrap হল একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা ওয়েব ডিজাইনকে সহজ এবং দ্রুত করার জন্য তৈরি হয়েছে। এটি বিভিন্ন ধরনের UI components (যেমন বাটন, টেবিল, ফর্ম, নেভিগেশন বার) এবং responsive grid system প্রদান করে।
Bootstrap ফাইল ইনক্লুড করা
Bootstrap ব্যবহার করতে প্রথমে আপনাকে CSS এবং JavaScript ফাইলগুলো আপনার পেজে ইনক্লুড করতে হবে। আপনি CDN (Content Delivery Network) ব্যবহার করে সরাসরি ফাইলগুলি আপনার অ্যাপ্লিকেশনে যোগ করতে পারেন, অথবা Bootstrap ফাইলগুলো ডাউনলোড করে লোকালি যুক্ত করতে পারেন।
CDN ব্যবহার করে Bootstrap ইনক্লুড:
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Bootstrap ক্লাস ব্যবহার
Bootstrap এর অনেক ক্লাস রয়েছে যা আপনার অ্যাপ্লিকেশনের বিভিন্ন UI অংশে প্রয়োগ করতে পারেন, যেমন buttons, forms, grids, cards ইত্যাদি।
উদাহরণস্বরূপ, একটি সিম্পল বাটন তৈরি করার জন্য:
<button class="btn btn-primary">Click Me</button>
Responsive Grid System ব্যবহার
Bootstrap এর grid system ব্যবহার করে ওয়েব পেজের লেআউট সহজে সাজানো যায়। এতে ১২টি কলামের লেআউট থাকে, যা বিভিন্ন স্ক্রীন সাইজের জন্য উপযোগী হয়।
উদাহরণস্বরূপ, একটি দুই কলামের লেআউট:
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Column 1</h2>
<p>Some content here...</p>
</div>
<div class="col-md-6">
<h2>Column 2</h2>
<p>Some more content here...</p>
</div>
</div>
</div>
এছাড়া, Bootstrap ছাড়াও আরও কিছু জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক আছে যা ASP.NET Web Forms অ্যাপ্লিকেশনে ইন্টিগ্রেট করা যেতে পারে:
ASP.NET Web Forms এ Bootstrap বা অন্যান্য ফ্রন্ট-এন্ড ফ্রেমওয়ার্কের ইন্টিগ্রেশন আপনার ওয়েব অ্যাপ্লিকেশনের ডিজাইন এবং ইউজার ইন্টারফেসকে অনেক উন্নত করতে সাহায্য করে। এতে দ্রুত এবং রেসপনসিভ ডিজাইন তৈরি করা সম্ভব, যা আধুনিক ওয়েব অ্যাপ্লিকেশনের জন্য অপরিহার্য। Bootstrap এবং অন্যান্য ফ্রন্ট-এন্ড ফ্রেমওয়ার্কের সহজ ব্যবহারের ফলে, আপনার অ্যাপ্লিকেশনটি মোবাইল ফ্রেন্ডলি এবং ইউজার ফ্রেন্ডলি হবে, যার ফলে ব্যবহারকারীর অভিজ্ঞতা উন্নত হবে।
Responsive Design হল একটি ওয়েব ডিজাইন পদ্ধতি যা বিভিন্ন ধরনের ডিভাইস (যেমন ডেস্কটপ, ল্যাপটপ, ট্যাবলেট, স্মার্টফোন) এবং স্ক্রিন সাইজের জন্য ওয়েব পেজের লেআউট এবং কন্টেন্ট স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট করে। এর লক্ষ্য হলো ওয়েব পেজকে যে কোনো স্ক্রিন সাইজে ব্যবহারকারীকে একটি ভালো এবং উপযুক্ত অভিজ্ঞতা প্রদান করা।
Responsive Design তৈরিতে CSS media queries, flexbox, grid layout, এবং fluid images এর মতো টেকনিক্যাল উপাদানগুলো ব্যবহৃত হয়। এটি ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটের জন্য এমন একটি ডিজাইন তৈরি করে যা প্রতিটি ডিভাইসে কার্যকরী এবং দৃশ্যমান থাকে।
Fluid Layouts (ফ্লুইড লেআউট)
ফ্লুইড লেআউটের মধ্যে ওয়েব পেজের কন্টেন্টের ডাইমেনশনগুলি percentage হিসাবে নির্ধারিত হয়, পিক্সেল না ব্যবহার করে। এর ফলে কন্টেন্ট ওয়েব পেজের প্রস্থ অনুযায়ী স্বয়ংক্রিয়ভাবে রিসাইজ হয়।
উদাহরণ:
.container {
width: 80%; /* Percentage width for fluid resizing */
}
Media Queries (মিডিয়া কুয়েরি)
Media Queries একটি CSS টুল যা নির্দিষ্ট স্ক্রিন সাইজের জন্য আলাদা স্টাইল প্রয়োগ করার সুযোগ দেয়। এর মাধ্যমে বিভিন্ন ডিভাইসের জন্য কাস্টম স্টাইল তৈরি করা যায়। মিডিয়া কুয়েরি স্ক্রীনের প্রস্থ, উচ্চতা, রেজোলিউশন ইত্যাদি যাচাই করে প্রয়োজনীয় স্টাইল প্রয়োগ করে।
উদাহরণ:
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
এই কোডটি স্ক্রিনের প্রস্থ 768px বা তার কম হলে কন্টেইনারের প্রস্থ 100% করবে।
Flexible Images (ফ্লেক্সিবল ইমেজ)
ছবি বা ইমেজগুলো এমনভাবে ডিজাইন করতে হয় যাতে তারা ওয়েব পেজের প্রস্থের সাথে রিসাইজ হয়। সাধারণত max-width: 100% CSS প্রপার্টি ব্যবহার করে ইমেজের আকার নিয়ন্ত্রণ করা হয়।
উদাহরণ:
img {
max-width: 100%; /* Ensures images resize within container */
height: auto;
}
Responsive Typography (রেসপন্সিভ টাইপোগ্রাফি)
ওয়েব পেজের লেখা এবং ফন্ট সাইজও স্ক্রীনের সাইজ অনুযায়ী পরিবর্তিত হওয়া উচিত। ছোট স্ক্রীনে বড় ফন্ট সাইজ বেশি স্পেস নেয়, তাই ফন্ট সাইজ কমানো প্রয়োজন। এটি em অথবা vw (viewport width) ব্যবহার করে করা যেতে পারে।
উদাহরণ:
h1 {
font-size: 5vw; /* Font size adjusts based on viewport width */
}
Base Layout তৈরি করুন
ওয়েব পেজের মৌলিক লেআউট তৈরি করুন যা প্রতিটি ডিভাইসে সঠিকভাবে কাজ করবে। সাধারণত flexbox বা CSS grid এর মাধ্যমে কন্ট্রোলের লেআউট সোজা এবং স্থিতিশীল রাখা যায়।
উদাহরণ:
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item {
flex: 1;
margin: 10px;
}
Media Queries ব্যবহার করুন
বিভিন্ন ডিভাইসের স্ক্রীন সাইজ অনুযায়ী আলাদা স্টাইল তৈরি করতে media queries ব্যবহার করুন। সাধারণত তিনটি ভিউপোর্ট সাইজের জন্য স্টাইল করা হয়:
উদাহরণ:
/* For small devices */
@media screen and (max-width: 480px) {
.menu {
display: none; /* Hide the menu for small screens */
}
}
/* For medium devices */
@media screen and (min-width: 481px) and (max-width: 768px) {
.menu {
display: block; /* Show the menu for medium screens */
}
}
Fluid Grid Layout তৈরি করুন
Flexbox বা CSS Grid ব্যবহার করে একটি fluid grid তৈরি করুন যা বিভিন্ন স্ক্রীন সাইজ অনুযায়ী উপাদানগুলোকে ভালোভাবে সাজাবে।
উদাহরণ:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* Single column for small screens */
}
}
Responsive Design তৈরি করা একটি গুরুত্বপূর্ণ প্রক্রিয়া যা বিভিন্ন স্ক্রীন সাইজে ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটের লেআউট এবং কন্টেন্ট ঠিকভাবে প্রদর্শন করতে সহায়তা করে। CSS media queries, fluid layouts, flexbox, grid system, এবং responsive images এর মাধ্যমে ওয়েব ডিজাইন এমনভাবে তৈরি করা হয় যাতে তা ডেস্কটপ, ল্যাপটপ, ট্যাবলেট, এবং স্মার্টফোনে ভালোভাবে কাজ করে এবং ব্যবহারকারীদের জন্য একটি সেরা অভিজ্ঞতা প্রদান করে।
Table এবং Grid Layout দুটি গুরুত্বপূর্ণ টুল যা ওয়েব ডিজাইনে ব্যবহৃত হয়। এগুলোর মাধ্যমে আমরা বিভিন্ন কন্টেন্ট বা ডেটাকে সুশৃঙ্খলভাবে উপস্থাপন করতে পারি। যদিও গ্রিড এবং টেবিল ডিজাইনের মধ্যে কিছু পার্থক্য রয়েছে, তবে উভয়ই নির্দিষ্ট সারি এবং কলামে কন্টেন্ট সাজাতে ব্যবহার হয়।
Table Layout ওয়েব পেজে ডেটা প্রদর্শনের জন্য সবচেয়ে প্রচলিত একটি টুল। এটি HTML টেবিলের মাধ্যমে ডেটাকে সারি এবং কলামে ভাগ করে দেখানোর পদ্ধতি। টেবিল ডিজাইন সাধারণত ডেটা সংরক্ষণের জন্য ব্যবহৃত হলেও এটি কিছু ক্ষেত্রে লেআউট তৈরির জন্যও ব্যবহৃত হতে পারে।
<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
এখানে:
<table> ট্যাগটি একটি টেবিল তৈরি করে।<tr> (table row) ট্যাগটি টেবিলের একটি সারি তৈরি করে।<th> (table header) ট্যাগটি টেবিলের হেডার সেল তৈরি করে।<td> (table data) ট্যাগটি টেবিলের সাধারণ সেল তৈরি করে।colspan এবং rowspan অ্যাট্রিবিউট ব্যবহার করা হয়।table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
Grid Layout CSS Grid ব্যবহার করে ওয়েব পেজের লেআউট ডিজাইন করা যায়। CSS Grid একটি দুই-মাত্রিক গ্রিড সিস্টেম যা সারি এবং কলামে কন্টেন্ট বিন্যস্ত করতে ব্যবহৃত হয়। এটি ওয়েব ডিজাইনে আরো নমনীয়তা এবং নিয়ন্ত্রণ প্রদান করে, বিশেষত জটিল লেআউট ডিজাইনের ক্ষেত্রে।
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
.grid-item {
background-color: lightgray;
padding: 20px;
text-align: center;
}
এখানে:
.grid-container ক্লাসটি display: grid; দিয়ে গ্রিড কন্টেইনার তৈরি করে।grid-template-columns ব্যবহার করে গ্রিডের কলামগুলো নির্ধারণ করা হয়।gap দিয়ে সেলগুলোর মধ্যে গ্যাপ বা দূরত্ব নির্ধারণ করা হয়।| বৈশিষ্ট্য | Grid Layout | Flexbox |
|---|---|---|
| পরিমাণ | দুই-মাত্রিক (rows + columns) | এক-মাত্রিক (rows অথবা columns) |
| ব্যবহারযোগ্যতা | জটিল লেআউটের জন্য উপযুক্ত | লাইন বা একক ডাইরেকশনাল লেআউট |
| নমনীয়তা | অত্যন্ত নমনীয় এবং কাস্টমাইজযোগ্য | সহজ এবং সোজা লেআউট নির্মাণে সাহায্য |
Table এবং Grid Layout ডিজাইন উভয়ই ওয়েব পেজে বিভিন্ন ধরনের কন্টেন্ট উপস্থাপন করতে ব্যবহৃত হয়, তবে তাদের ব্যবহারের উদ্দেশ্য এবং বৈশিষ্ট্য আলাদা। Table Layout সাধারণত ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়, যেখানে Grid Layout ব্যবহার করে আরও লচিল ও প্রোফেশনাল ওয়েব লেআউট তৈরি করা সম্ভব। Web Design এর প্রয়োজন অনুসারে, আপনি এই দুটি টুলের মধ্যে থেকে সঠিক একটি নির্বাচন করতে পারবেন।
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
